<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			html,body{
				height: 3000px;
			}
			
		</style>
	</head>
	<body>
		
		
		
		
		<div class="diolag" style="width: 500px;height: 500px;border: 1px solid red;position: absolute;top: 100px;">
			
		</div>
		
		
		<script>
			$(function(){
				document.onmousedown = function(event){
						let mouseX=event.pageX;
						let mouseY=event.pageY;
						
						//offset().left拿到元素距离页面左侧的距离
						let diolagX=$(".diolag").offset().left;
						//offset().top拿到元素距离页面顶部的距离
						let diolagY=$(".diolag").offset().top;
						
						
						let diolagWidth=$(".diolag").width();
						let diolagHeight=$(".diolag").height();
						
						if(diolagX+diolagWidth>mouseX && mouseX>diolagX && diolagY+diolagHeight>mouseY && mouseY>diolagY){
							 newdiolagX=diolagX+diolagWidth-mouseX,
							 newdiolagY=diolagY+diolagHeight-mouseY,
							  document.onmousemove=function(event){
								  console.log(1)
									mouseX=event.pageX;
									mouseY=event.pageY;
									diolagX=mouseX-newdiolagX;
									diolagY=mouseY-newdiolagY;
									console.log("mouseX:",mouseX)
									console.log("mouseY:",mouseY)
									console.log("diolagX:",diolagX)
									console.log("diolagY:",diolagY)
									console.log("newdiolagX:",newdiolagX)
									console.log("newdiolagY:",newdiolagY)
									$(".diolag").css({
										"left":diolagX+"px",
										"top":diolagY+"px",
										
									})	
								
							  }
							  document.onmouseup=function(event){
								  console.log(2)
								  mouseX=event.pageX;
								  mouseY=event.pageY;
								  diolagX=mouseX-newdiolagX;
								  diolagY=mouseY-newdiolagY;
								  $(".diolag").css({
								  	"left":diolagX+"px",
								  	"top":diolagY+"px",
									
								  })	
								  //将监听鼠标移动的事件和鼠标恢复事件移除
								 document.onmousemove= document.onmouseup=null
							  }
							
							 
						}
						
						
				}
			})
			
		</script>
		
	</body>
</html>
